<template>
    <div class="quality-overview-container">
        <global-search @submitSearch="submitSearch" class="global-tool-search"/>
        <overview-card :cardName="cardName.cardList" :cardData="cardData" listUrlName="OverviewListIndex"/>
        <div class="flex-box">
            <overview-echart titleText="overview" :showText="showText" :initCardParams="initCardParams" :cardName="cardName.echart" :echartData="echartData"/>
            <div class="bar-top10">
                <div class="head">
                    <h3>缺陷提示 TOP10 统计</h3>
                    <div class="radio-box">
                        <el-radio-group v-model="radio" @change="changeList">
                            <el-radio :label="0">编码缺陷</el-radio>
                            <el-radio :label="1">非编码缺陷</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <ul v-if="realList.length > 0">
                    <li v-for="item in realList">
                        <el-progress :stroke-width="15" :percentage="item.value / total * 100" :color="item.color" :format="progressFormat"></el-progress>
                        <p class="li-item-text">{{item.key}}</p>
                        <p class="to-MRList" @click="toMRList(item.key)">{{item.value + '例'}}</p>
                    </li>
                </ul>
                <p v-else class="no-data">暂无数据</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {getQualityAll, getQualityTop10, getQualityTrend} from '@/api/quality-overview/index'
    import OverviewEchart from '@/components/OverviewEchart'
    import OverviewCard from '@/components/OverviewCard'
    import {getZeroTwoNum} from '@/utils/filters'

    export default {
        name: 'index',
        data () {
            return {
                // 配置echart卡片参数
                initCardParams: {
                    width: 'calc(58% - 10px)',
                    height: '530px',
                    type: 'line'
                },
                // echart数据
                echartData: [],
                // 卡片名称
                cardName: {
                    cardList: '质控结果总览',
                    echart: '缺陷项趋势图'
                },
                cardData: [],
                // 编码和非编码缺陷选择
                radio: 0,
                // 数据总数
                total: 0,
                // 编码错误数据总数
                totalError: 0,
                // 非编码错误数据总数
                totalNonError: 0,
                // 进度条数据
                top10List: [],
                // 实际使用数据/进度条
                realList: [],
                // 图表显示文字
                showText: {
                    codingError: 0,
                    noCodingError: 0
                },
                // 使用储存的数据，不去请求
                useStoreOverview: false,
                useStoreTop10: false,
                useStoreTrend: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStoreOverview = this.$route.query.tags === 'tags'
            this.useStoreTop10 = this.$route.query.tags === 'tags'
            this.useStoreTrend = this.$route.query.tags === 'tags'
        },
        methods: {
            getZeroTwoNum,
            /**
             * 提交查询
             * @param form 筛选条件
             */
            submitSearch (form) {
                let params = {
                    start: form.start,
                    end: form.end,
                    orgId: form.orgId,
                    department: form.department,
                    departmentName: form.departmentName,
                    coder: form.coder,
                    isLast: form.isLast
                }
                this.setGetStore(this.$route.name, params)
                this.getDataOverview(params)
                this.getTop10(params)
                this.getTrend(params)
            },
            /**
             * 获取总览
             * @param data 请求参数
             */
            getDataOverview (data) {
                if (this.getSession(this.$route.name, 'getQualityAll') && this.useStoreOverview) {
                    this.useStoreOverview = false
                    let res = this.getSession(this.$route.name, 'getQualityAll')
                    if (res.code.toString() === '200') {
                        // 顶部卡片数据
                        this.cardData = [
                            {
                                name: '质控总病案数',
                                unit: '例',
                                tipsUnit: '%',
                                number: res.data.total,
                                intuitive: getZeroTwoNum(res.data.totalCom * 100),
                                urlName: 'OverviewListIndex'
                            }, {
                                name: '总缺陷病案数',
                                unit: '例',
                                tipsUnit: '%',
                                number: res.data.defect,
                                intuitive: getZeroTwoNum(res.data.defectCom * 100),
                                urlName: 'OverviewListIndex',
                                defectSate: 4
                            }, {
                                name: '总缺陷率',
                                unit: '%',
                                tipsUnit: '%',
                                number: getZeroTwoNum(res.data.defectRate * 100),
                                intuitive: getZeroTwoNum(res.data.defectRateCom * 100),
                                urlName: 'OverviewListIndex',
                                defectSate: 4
                            }, {
                                name: '非编码缺陷病案数',
                                unit: '例',
                                tipsUnit: '%',
                                number: res.data.noneCodingDefect,
                                intuitive: getZeroTwoNum(res.data.noneCodingDefectCom * 100),
                                urlName: 'OverviewListIndex',
                                defectSate: 6
                            },
                            {
                                name: '非编码缺陷率',
                                unit: '%',
                                tipsUnit: '%',
                                number: getZeroTwoNum(res.data.noneCodingDefectRate * 100),
                                intuitive: getZeroTwoNum(res.data.noneCodingDefectRateCom * 100),
                                urlName: 'OverviewListIndex',
                                defectSate: 6
                            }, {
                                name: '编码缺陷病案数',
                                unit: '例',
                                tipsUnit: '%',
                                number: res.data.codingDefect,
                                intuitive: getZeroTwoNum(res.data.codingDefectCom * 100),
                                urlName: 'OverviewListIndex',
                                defectSate: 5
                            }, {
                                name: '编码缺陷率',
                                unit: '%',
                                tipsUnit: '%',
                                number: getZeroTwoNum(res.data.codingDefectRate * 100),
                                intuitive: getZeroTwoNum(res.data.codingDefectRateCom * 100),
                                urlName: 'OverviewListIndex',
                                defectSate: 5
                            }, {
                                name: '主要诊断缺陷病案数',
                                unit: '例',
                                tipsUnit: '%',
                                number: res.data.diagnosisDefect,
                                intuitive: res.data.diagnosisDefectCom,
                                urlName: 'OverviewListIndex',
                                defectSate: 8
                            }, {
                                name: '主要手术缺陷病案数',
                                unit: '例',
                                tipsUnit: '%',
                                number: res.data.surgeryDefect,
                                intuitive: res.data.surgeryDefectCom,
                                urlName: 'OverviewListIndex',
                                defectSate: 10
                            }, {
                                name: '国标平均得分',
                                unit: '分',
                                tipsUnit: '分',
                                number: res.data.nationAvgScore,
                                intuitive: res.data.nationAvgScoreCom
                            }
                        ]
                    }
                } else {
                    getQualityAll(data).then(res => {
                        this.useStoreOverview = false
                        this.setSession(this.$route.name, {getQualityAll: res})
                        if (res.code.toString() === '200') {
                            // 顶部卡片数据
                            this.cardData = [
                                {
                                    name: '质控总病案数',
                                    unit: '例',
                                    tipsUnit: '%',
                                    number: res.data.total,
                                    intuitive: getZeroTwoNum(res.data.totalCom * 100),
                                    urlName: 'OverviewListIndex'
                                }, {
                                    name: '总缺陷病案数',
                                    unit: '例',
                                    tipsUnit: '%',
                                    number: res.data.defect,
                                    intuitive: getZeroTwoNum(res.data.defectCom * 100),
                                    urlName: 'OverviewListIndex',
                                    defectSate: 4
                                }, {
                                    name: '总缺陷率',
                                    unit: '%',
                                    tipsUnit: '%',
                                    number: getZeroTwoNum(res.data.defectRate * 100),
                                    intuitive: getZeroTwoNum(res.data.defectRateCom * 100),
                                    urlName: 'OverviewListIndex',
                                    defectSate: 4
                                }, {
                                    name: '非编码缺陷病案数',
                                    unit: '例',
                                    tipsUnit: '%',
                                    number: res.data.noneCodingDefect,
                                    intuitive: getZeroTwoNum(res.data.noneCodingDefectCom * 100),
                                    urlName: 'OverviewListIndex',
                                    defectSate: 6
                                },
                                {
                                    name: '非编码缺陷率',
                                    unit: '%',
                                    tipsUnit: '%',
                                    number: getZeroTwoNum(res.data.noneCodingDefectRate * 100),
                                    intuitive: getZeroTwoNum(res.data.noneCodingDefectRateCom * 100),
                                    urlName: 'OverviewListIndex',
                                    defectSate: 6
                                }, {
                                    name: '编码缺陷病案数',
                                    unit: '例',
                                    tipsUnit: '%',
                                    number: res.data.codingDefect,
                                    intuitive: getZeroTwoNum(res.data.codingDefectCom * 100),
                                    urlName: 'OverviewListIndex',
                                    defectSate: 5
                                }, {
                                    name: '编码缺陷率',
                                    unit: '%',
                                    tipsUnit: '%',
                                    number: getZeroTwoNum(res.data.codingDefectRate * 100),
                                    intuitive: getZeroTwoNum(res.data.codingDefectRateCom * 100),
                                    urlName: 'OverviewListIndex',
                                    defectSate: 5
                                }, {
                                    name: '主要诊断缺陷病案数',
                                    unit: '例',
                                    tipsUnit: '%',
                                    number: res.data.diagnosisDefect,
                                    intuitive: res.data.diagnosisDefectCom,
                                    urlName: 'OverviewListIndex',
                                    defectSate: 8
                                }, {
                                    name: '主要手术缺陷病案数',
                                    unit: '例',
                                    tipsUnit: '%',
                                    number: res.data.surgeryDefect,
                                    intuitive: res.data.surgeryDefectCom,
                                    urlName: 'OverviewListIndex',
                                    defectSate: 10
                                }, {
                                    name: '国标平均得分',
                                    unit: '分',
                                    tipsUnit: '分',
                                    number: res.data.nationAvgScore,
                                    intuitive: res.data.nationAvgScoreCom
                                }
                            ]
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 获取top10
             * @param data 请求参数
             */
            getTop10 (data) {
                if (this.getSession(this.$route.name, 'getQualityTop10') && this.useStoreTop10) {
                    this.useStoreTop10 = false
                    let res = this.getSession(this.$route.name, 'getQualityTop10')
                    if (res.code.toString() === '200') {
                        if (res.data) {
                            this.totalError = 0
                            this.totalNonError = 0
                            this.top10List = res.data
                            this.top10List.coding.forEach((item, index) => {
                                this.top10List.coding[index].color = '#e2e3e6'
                                switch (index) {
                                case 0:
                                    this.totalError = Number(item.value)
                                    this.top10List.coding[index].color = '#f26666'
                                    break
                                case 1:
                                    this.top10List.coding[index].color = '#f2ab66'
                                    break
                                case 2:
                                    this.top10List.coding[index].color = '#66a0f2'
                                    break
                                }
                            })
                            this.top10List.noneCoding.forEach((item, index) => {
                                this.top10List.noneCoding[index].color = '#e2e3e6'
                                switch (index) {
                                case 0:
                                    this.totalNonError = Number(item.value)
                                    this.top10List.noneCoding[index].color = '#f26666'
                                    break
                                case 1:
                                    this.top10List.noneCoding[index].color = '#f2ab66'
                                    break
                                case 2:
                                    this.top10List.noneCoding[index].color = '#66a0f2'
                                    break
                                }
                            })
                        } else {
                            this.top10List.noneCoding = []
                            this.top10List.coding = []
                        }
                        this.changeList()
                    }
                } else {
                    getQualityTop10(data).then(res => {
                        this.useStoreTop10 = false
                        this.setSession(this.$route.name, {getQualityTop10: res})
                        if (res.code.toString() === '200') {
                            if (res.data) {
                                this.totalError = 0
                                this.totalNonError = 0
                                this.top10List = res.data
                                this.top10List.coding.forEach((item, index) => {
                                    this.top10List.coding[index].color = '#e2e3e6'
                                    switch (index) {
                                    case 0:
                                        this.totalError = Number(item.value)
                                        this.top10List.coding[index].color = '#f26666'
                                        break
                                    case 1:
                                        this.top10List.coding[index].color = '#f2ab66'
                                        break
                                    case 2:
                                        this.top10List.coding[index].color = '#66a0f2'
                                        break
                                    }
                                })
                                this.top10List.noneCoding.forEach((item, index) => {
                                    this.top10List.noneCoding[index].color = '#e2e3e6'
                                    switch (index) {
                                    case 0:
                                        this.totalNonError = Number(item.value)
                                        this.top10List.noneCoding[index].color = '#f26666'
                                        break
                                    case 1:
                                        this.top10List.noneCoding[index].color = '#f2ab66'
                                        break
                                    case 2:
                                        this.top10List.noneCoding[index].color = '#66a0f2'
                                        break
                                    }
                                })
                            } else {
                                this.top10List.noneCoding = []
                                this.top10List.coding = []
                            }
                            this.changeList()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 获取缺陷分析
             * @param data 请求参数
             */
            getTrend (data) {
                if (this.getSession(this.$route.name, 'getQualityTrend') && this.useStoreTrend) {
                    this.useStoreTrend = false
                    let res = this.getSession(this.$route.name, 'getQualityTrend')
                    if (res.code.toString() === '200') {
                        this.echartData = [{
                            name: '编码缺陷',
                            data: res.data.coding,
                            xIndex: res.data.xIndex
                        }, {
                            name: '非编码缺陷',
                            data: res.data.noneCoding,
                            xIndex: res.data.xIndex
                        }]
                        this.showText.codingError = res.data.codingTotal
                        this.showText.noCodingError = res.data.noneCodingTotal
                    }
                } else {
                    getQualityTrend(data).then(res => {
                        this.useStoreTrend = false
                        this.setSession(this.$route.name, {getQualityTrend: res})
                        if (res.code.toString() === '200') {
                            this.echartData = [{
                                name: '编码缺陷',
                                data: res.data.coding,
                                xIndex: res.data.xIndex
                            }, {
                                name: '非编码缺陷',
                                data: res.data.noneCoding,
                                xIndex: res.data.xIndex
                            }]
                            this.showText.codingError = res.data.codingTotal
                            this.showText.noCodingError = res.data.noneCodingTotal
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            /**
             * 切换单选改变数据
             */
            changeList () {
                this.realList = this.radio ? this.top10List.noneCoding : this.top10List.coding
                this.total = this.radio ? this.totalNonError : this.totalError
            },
            /**
             * 设置右侧显示文字
             * @param percentage 当前进度
             */
            progressFormat (percentage) {
                // return Math.round(percentage * this.total / 100) + '例'
                return ''
            },
            /**
             * 前往病案列表
             * @param errReason 提示信息
             */
            toMRList (errReason) {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                let params = {
                    ...query,
                    errReason: errReason,
                    defectSate: this.radio ? 6 : 5,
                    pageIndex: 1
                }
                this.$store.dispatch('search/coverSearchFormItem', {
                    pageName: 'OverviewListIndex',
                    query: params
                })
                this.$router.push({name: 'OverviewListIndex'})
            }
        },
        components: {
            OverviewCard,
            OverviewEchart
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .quality-overview-container {
        .flex-box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 10px;
            .bar-top10 {
                width: 42%;
                height: 530px;
                background: #fff;
                padding: 0 10px;
                box-sizing: border-box;
                .head {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    h3 {
                        font-size: 16px;
                        color: #000;
                        font-weight: 600;
                        line-height: 48px;
                    }
                }
                ul {
                    margin: 5px 0 0 0;
                    padding: 0;
                    li {
                        margin: 0;
                        padding: 0;
                        position: relative;
                        /deep/ .el-progress-bar {
                            width: 80%;
                        }
                        /deep/ .el-progress__text {
                            font-size: 12px !important;
                            color: #606266;
                        }
                        .li-item-text {
                            font-size: 12px;
                            line-height: 14px;
                            margin: 4px 0 10px;
                        }
                        .to-MRList {
                            font-size: 12px;
                            line-height: 18px;
                            position: absolute;
                            left: 76%;
                            top: 0;
                            color: #409EFF;
                            cursor: pointer;
                            margin: 0;
                            font-weight: 500;
                        }
                    }
                }
                .no-data {
                    text-align: center;
                }
            }
        }
    }
</style>
